<template>
    <div class="info">
        <van-sku
                v-model="show"
                :sku="sku"
                :goods="goods"
                :goods-id="goodsId"
                :quota="quota"
                :quota-used="quotaUsed"
                :hide-stock="sku.hide_stock"
                @buy-clicked="onBuyClicked"
                @add-cart="onAddCartClicked"
        />
    </div>
</template>

<script>
    import {getProductDetail, addCart} from "../utils/apis";
    import {Toast} from "vant";

    export default {
        name: "Details",
        data() {
            return {
                goodsId: 1,
                quota: 10,
                quotaUsed: 0,
                show: true,
                sku: {
                    tree: [
                        {
                            k: "图片", // skuKeyName：规格类目名称
                            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                            v: [
                                {
                                    id: "101", // skuValueId：规格值 id
                                    name: "", // skuValueName：规格值名称
                                    imgUrl: "http://127.0.0.1:8083/images/chelizi2.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                                    previewImgUrl: "http://127.0.0.1:8083/images/chelizi2.jpg" // 用于预览显示的规格类目图片
                                }
                            ],
                            largeImageMode: true //  是否展示大图模式
                        }
                    ],
                    // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                    list: [
                        {
                            id: 1, // skuId
                            s1: "101", // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: "201", // 规格类目 k_s 为 s2 的对应规格值 id
                            price: 101, // 价格（单位分）
                            stock_num: 101 // 当前 sku 组合对应的库存
                        }
                    ],
                    price: "0.5", // 默认价格（单位元）
                    stock_num: 227, // 商品总库存
                    collection_id: 101, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                    none_sku: false, // 是否无规格商品
                    hide_stock: false // 是否隐藏剩余库存
                },
                goods: {
                    picture:
                        "http://127.0.0.1:8083/images/chelizi2.jpg"
                },
            };
        },
        watch: {
            show(newValue) {
                if (newValue === false) {
                    this.$emit('changeProductId', 0)
                }
            }
        },
        props: ['productId'],
        created() {
            this.getProductDetails(this.productId)
        },
        methods: {
            getProductDetails(productId) {
                getProductDetail({id: productId}).then(res => {
                    const data = res.data
                    this.goodsId = data.id
                    this.goods = {
                        'picture': data.image
                    }
                    this.sku = {
                        tree: [
                            {
                                k: "图片", // skuKeyName：规格类目名称
                                k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                                v: [
                                    {
                                        id: data.id, // skuValueId：规格值 id
                                        name: "", // skuValueName：规格值名称
                                        imgUrl: data.image, // 规格类目图片，只有第一个规格类目可以定义图片
                                        previewImgUrl: data.image // 用于预览显示的规格类目图片
                                    }
                                ],
                                largeImageMode: true //  是否展示大图模式
                            }
                        ],
                        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                        list: [
                            {
                                id: 1, // skuId
                                s1: data.id, // 规格类目 k_s 为 s1 的对应规格值 id
                                price: data.price, // 价格（单位分）
                                stock_num: data.stock // 当前 sku 组合对应的库存
                            }
                        ],
                        price: data.price / 100, // 默认价格（单位元）
                        stock_num: data.stock, // 商品总库存
                        collection_id: data.id, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                        none_sku: false, // 是否无规格商品
                        hide_stock: false // 是否隐藏剩余库存
                    }
                })
            },
            onBuyClicked(sku) {
                this.show = false
                console.log(sku);
            },
            onAddCartClicked(sku) {
                console.log(sku);
                addCart({
                    productId: sku.goodsId,
                    count: sku.selectedNum
                }).then(res => {
                    this.show = false
                    Toast('添加成功');
                })
            },

        }

    };
</script>

<style>
</style>
